<template>
    <div :class="panelClass">
        <template v-if="hasTitle">
            <div class="panel-title border-black-color">
                <div class="title-left">
                    <div class="title title-color">
                        <img class="panel-title-icon" v-if="titleAvatar" :src="titleAvatar" :alt="title">
                        {{title}}
                    </div>
                    <div class="title-desc">{{label}}</div>
                </div>
                <div class="title-right" @click="click">
                    <slot name="value">
                        <span v-if="value" class="title-right-value">{{value}}</span>
                    </slot>
                    <TechIcon class="panel-right-icon" v-if="isLink" name="arrow" />
                </div>
            </div>
        </template>
        <div class="panel-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import TechIcon from './TechIcon';
export default {
    name: 'TechPanel',
    components: {
        TechIcon,
    },
    computed: {
        panelClass() {
            const { type, noPadding, titleBorder, isBold, hasShadow, mode } = this.$props;
            return `tech-panel tech-panel-${type} ${titleBorder ? 'title-border' : ''} ${noPadding ? 'tech-panel-no-padding' : ''} ${isBold ? 'title-bold' : ''} ${hasShadow ? 'tech-panel-shandow' : ''} ${mode}`;
        },
    },
    props: {
        title: {
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: 'normal', // normal,gray,list,content
        },
        titleAvatar: {
            type: String,
            default: '',
        },
        value: String,
        label: String,
        isLink: {
            type: Boolean,
            default: false,
        },
        noPadding: {
            type: Boolean,
            default: false,
        },
        titleBorder: {
            type: Boolean,
            default: false,
        },
        isBold: {
            type: Boolean,
            default: false,
        },
        hasTitle: {
            type: Boolean,
            default: true,
        },
        hasShadow: {
            type: Boolean,
            default: false,
        },
        mode: {
            type: String,
            default: '',
        },
    },
    methods: {
        click() {
            this.$emit('click');
        },
    },
};
</script>

<style lang="less">
    .tech-panel {
        background-color: @white;
        .radius-and-shandow();
        .mode-white();
        .panel-title {
            .font-size-md();
            color: @text-color;
            .p-v(@gap);
            .flex();
            align-items: center;
            .title-left {
                text-indent: @gap-md;
            }
            justify-content: space-between;
        }
        .panel-title-icon {
            width: 12px;
            height: 12px;
            .m-r(@gap-sm);
        }
        .panel-content {
            .p(@gap-md);
            .p-t(0);
        }
        &.black {
            background-color: @black-bg-color;
        }
        &.tech-panel-shandow {
            box-shadow:0px 0px 22px -8px rgba(0,0,0,0.06);
        }
        &.title-border {
            .panel-title {
                position: relative;
                .border-line();
            }
            .panel-content {
                .p-t(@gap);
            }
        }
        &.tech-panel-no-padding {
            .panel-content {
                .p(0);
            }
        }
        &.title-bold {
            .panel-title {
                .title {
                    font-weight: bold;
                }
            }
        }
        .van-hairline--top-bottom::after {
            border-top: none;
        }
        &.tech-panel-gray {
            background-color: @background-color;
            .panel-title {
                .font-size-sm();
                color: @gray-dark;
                font-weight: normal;
            }
            .panel-content {
                .p(0);
                border-radius: @border-radius;
                background-color: @white;
                overflow: hidden;
            }
        }
        &.tech-panel-content {
            .panel-title {
                .font-size();
                color: @black;
                .title-left {
                    text-indent: 0;
                    font-weight: bold;
                }
            }
            .panel-content {
                .p(0);
                .p-b(@gap-md);
            }
        }
        &.tech-panel-list {
            .panel-title {
                .font-size-sm();
                color: @gray-darker;
                background-color: @white;
                border-bottom: @border;
                font-weight: normal;
                .title {
                    font-weight: bold;
                }
            }
            .panel-content {
                .p(0);
            }
        }
        .title-left {
            .title-desc {
                .font-size-sm();
                color: @gray-dark;
            }
        }
        .title-right {
            .p-r(@gap-md);
            .flex-row-center();
            .panel-right-icon, .title-right-value {
                color: @gray-dark;
                .font-size-sm();
                .m-l(@gap-sm);
            }
        }
    }
</style>

